body {
  font-family: "微软雅黑";
  margin: 0;
  padding: 0;
  /* 浅灰色背景 */
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 确保了 body 的高度始终等于视口的高度,其子元素可以在整个视口中水平和垂直居中 */
  height: 100vh;
}

/* 整个登录页面 */
.container {
  display: flex;
  /* 添加阴影效果 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  /* 确保子元素不会超出容器的圆角 ,不会产生覆盖*/
  overflow: hidden;
  /* 使点击div时产生的光标透明 */
  caret-color: transparent;
}

/* 给页面定义一个关闭动画 */
@keyframes fadeOutBottomUp {
  0% {
    /* clip-path 创建一个只显示元素的特定部分的剪辑区域。 */
    /* inset 值定义了从元素的边缘开始的剪辑区域。
    此动画的效果是从下部开始逐渐隐藏元素，直到整个元素都被隐藏。 */
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  100% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
}

/* 给页面定义一个打开动画 */
/* @keyframes fadeOpenTopDown {
  0% {}

  100% {}
} */

/* 左侧图片 */
.left {
  width: 400.54px;
  height: 520.81px;
  background-image: url('img/左侧背景.PNG');
  background-size: cover;
}

/* 右侧页面 */
.right {
  flex: 1;
  height: 521px;
  /* 右侧最小宽度是页面在缩小时不变形 */
  min-width: 281px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  /* 使内容垂直居中 */
  justify-content: center;
  /* 使内容水平居中 */
  align-items: center;
  /* 设置为相对定位，使子元素可以根据它进行绝对定位 */
  position: relative;

}

/* _______________________________________________________________*/
/* 第一部分:设置/退出/返回按钮 */
.settings,
.exit {
  color: rgb(220, 220, 220);
  position: absolute;
  top: 18px;
  right: 20px;
  width: 24px;
  height: 24px;
  /* 移除边框 */
  border: none;
  /* 设置透明背景 */
  background: transparent;
  /* 移除焦点时的轮廓 */
  outline: none;
}

.settings {
  /* 根据'右侧页面'绝对定位 */
  right: 53.7px;
}

/* .exit {} */


.return {
  color: rgb(220, 220, 220);
  position: absolute;
  top: 18px;
  left: 10px;
  width: 44px;
  height: 24px;
  /* 移除边框 */
  border: none;
  /* 设置透明背景 */
  background: transparent;
  /* 移除焦点时的轮廓 */
  outline: none;
}

.return-text {
  position: absolute;
  top: 2.3px;
  left: 20px;
  font-size: 11.3px;
  color: rgb(144, 144, 144);
}

.settings:hover,
.exit:hover {
  /* 鼠标悬停时的颜色 */
  color: #cccccc;
  /* 使按钮稍微放大 */
  transform: scale(1.005);
  /* 显示手型光标 */
  cursor: pointer;
}

.return:hover {
  /* 显示手型光标 */
  cursor: pointer;
}

.return-icon:hover {
  /* 鼠标悬停时的颜色 */
  color: #aaaaaa;
  /* 使按钮稍微放大 */
  transform: scale(1.005);
}


.settings:active,
.exit:active,
.return-icon.active {
  /* 鼠标点击时的颜色 */
  color: #979797;
}

/* _______________________________________________________________*/
/* 第二部分:登录按钮容器 */
.login-btn-container {
  /* 根据'右侧页面'绝对定位 */
  position: absolute;
  top: 95px;
}

.login-btn {
  margin: 0 10px;
  /* 行内块元素,使其并列显示 */
  display: inline-block;
}

.login-btn:hover {
  /* 触碰显示手型光标 */
  cursor: pointer;
}

.qq-btn,
.wechat-btn {
  width: 59px;
  height: 59px;
  background-color: #f5f5f5;
  border-radius: 50%;
  /* 移除边框 */
  border: none;
  /* 移除焦点时的轮廓 */
  outline: none;
}

.qq-icon,
.wechat-icon {
  color: #a6a6a6;
  height: 59px;
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
}

.qq-font,
.wechat-font {
  font-size: 12px;
  color: gray;
  text-align: center;
  margin-top: 3.5px;
}


.qq-btn.active {
  /* 为什么没有用focus?因为focus点击别的地方后会失去焦点 */
  /* 鼠标悬停时/点击后的颜色 */
  background-color: #1191ff;
}

.qq-icon.active {
  color: #fff;
}

.qq-font.active {
  /* 鼠标悬停时/点击后的颜色 */
  color: #1191ff;
}

.wechat-btn.active {
  background-color: #17c444;
}

.wechat-icon.active {
  color: #fff;
}

.wechat-font.active {
  color: #17c444;
}

/* -------------------------------------------------------------- */
/* 设置两个active防止"移出按钮"事件使"点击按钮"事件的active设置失效 */
.qq-btn.active1 {
  /* 为什么没有用focus?因为focus点击别的地方后会失去焦点 */
  /* 鼠标悬停时/点击后的颜色 */
  background-color: #1191ff;
}

.qq-icon.active1 {
  color: #fff;
}

.qq-font.active1 {
  /* 鼠标悬停时/点击后的颜色 */
  color: #1191ff;
}

.wechat-btn.active1 {
  background-color: #17c444;
}

.wechat-icon.active1 {
  color: #fff;
}

.wechat-font.active1 {
  color: #17c444;
}

/* QQ二维码登录按钮 */
.erweima {
  position: absolute;
  top: 326px;
  right: 30px;
}

/* _______________________________________________________________- */
/* 第三部分:输入表单部分的样式 */
.login-form {
  /* 设置宽度为100% */
  width: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  /* 使内容水平居中 */
  align-items: center;
}

.qq-form {
  position: absolute;
  /* 根据需要调整此数值 */
  top: 222px;
}

.login-form.active {
  display: flex;
}

.input-field {
  border: none;
  border-bottom: 1px solid rgb(218, 217, 217);
  /* 调整宽度 */
  width: 77%;
  padding-top: 16px;
  padding-bottom: 16px;
  /* 输入字体的大小 */
  font-size: 18px;
  /* 使点击后显示光标 */
  caret-color: rgba(0, 0, 0, 0.3);
}

/* 设置提示的字体大小 */
.input-field::placeholder {
  font-family: "微软雅黑";
  font-size: 13.5px;
}

.input-field:focus {
  outline: none;
}

/* ---------------------------------------- */
/* 下拉表单按钮样式*/
.dropdown-toggle {
  position: absolute;
  top: 16px;
  right: 29px;
  cursor: pointer;
}

.icon {
  display: none;
  width: 20px;
  height: 20px;
}

.icon-down {
  /* 默认显示下箭头 */
  display: inline-block;
}

/* 下拉表单内容 */
.dropdown-content {
  display: none;
  position: absolute;
  top: 58px;
  background-color: #ffffff;
  border: none;
  width: 76%;
  /* 堆叠在其他元素上 */
  z-index: 1;
  box-shadow: 0 1px 4px rgba(11, 11, 11, 0.2);
  border-radius: 3px;
}

/* 下拉框样式 */
.dropdown-item {
  padding: 8px 12px;
  margin: 5px 3px;
  cursor: pointer;
}

.dropdown-item.active {
  background-color: #f2f2f2;
}

/* ----------------------------------------------------- */
/* 密码输入框样式 */
.password-field {
  border: none;
  /* 输入框底线 */
  border-bottom: 1px solid rgb(218, 217, 217);
  /* 与输入框宽度一致 */
  width: 77%;
  padding-top: 16px;
  padding-bottom: 16px;
  /* 使点击后显示光标以及颜色 */
  caret-color: rgba(0, 0, 0, 0.3);
}

/* 隐藏 edge 的显示密码按钮 */
/* .password-field::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
} */

/* .password-field::-ms-reveal {
  display: none !important;
} */

/* 密码输入框里面提示的字体大小 */
.password-field::placeholder {
  font-size: 12px;
  font-family: "微软雅黑";
}

.password-field:focus {
  outline: none;
}

/* 当输入框获得焦点时，隐藏占位符 */
.input-field:focus::placeholder,
.password-field:focus::placeholder {
  /* 完全透明，就不可见了 */
  opacity: 0;
}

/* ------------------------------------------------------ */
/* 提交按钮样式 */
.submit-btn {
  position: absolute;
  top: 62.7px;
  right: 30.5px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid rgb(194, 194, 194);
}

.submit-jiantou {
  color: #818181;
  height: 29.5px;
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
}

.submit-btn.active {
  background-color: rgb(245, 247, 248);
}

.submit-jiantou.active {
  color: rgb(92, 92, 92);
}

/* ------------------------------------------------------ */
/* 没输入用户名提示框 */
.error-message1 {
  font-size: 12px;
  text-align: center;
  background: #ffffff;
  border-radius: 1.5px;
  padding: 5px 2px;
  box-shadow: 0 0 4px rgba(43, 96, 96, 0.996);
  /* 宽度 */
  width: 128px;
  /* 定位 */
  position: absolute;
  top: 35px;
  left: 5px;
}

/* 没输入密码提示框 */
.error-message2 {
  font-size: 12px;
  text-align: center;
  background: #ffffff;
  border-radius: 1.5px;
  padding: 5px 2px;
  box-shadow: 0 0 4px rgba(43, 96, 96, 0.996);
  ;
  /* 宽度 */
  width: 128px;
  /* 定位 */
  position: absolute;
  top: 85px;
  left: 5px;
}

/* 提示框上的小箭头,使其看起来像一个气泡 */
.error-message1::after,
.error-message2::after {
  content: "";
  position: absolute;
  /* 在气泡的顶部 */
  bottom: 100%;
  left: 18%;
  /* 偏移量应等于箭头宽度的一半 */
  margin-left: -5px;
  /* 箭头大小 */
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent rgb(186, 186, 186) transparent;
}

/* ------------------------------------------------------ */
/* 微信二维码登录页面 */
.wechat-form {
  position: absolute;
  /* 根据需要调整此数值 */
  top: 200px;
}

/* 二维码大小 */
.VX-code {
  width: 125px;
  height: 125px;
}

/* 二维码下面文字 */
.VX-text {
  font-size: 12px;
  color: rgb(125, 125, 125);
  margin-top: 23px;
}

.VX-text1 {
  margin-bottom: 0px;
}

.VX-text2 {
  margin-top: 0px;
  /* 使"TIM"文字居中 */
  text-align: center;
}

/* ------------------------------------------------------ */
/* QQ二维码登录页面 */
.qqcode-form {
  position: absolute;
  /* 根据需要调整此数值 */
  top: 200px;
}

/* 二维码大小 */
.qq-code {
  width: 125px;
  height: 125px;
}

/* 二维码下面文字 */
.qqcode-text {
  font-size: 12px;
  color: rgb(0, 0, 0);
  /* 距上面二维码的距离 */
  margin-top: 38px;
}

/* 连接 */
.qqcode-a {
  color: #244ffd;
  text-decoration: none
}

.qqcode-a:hover {
  text-decoration: underline;
}

/* _______________________________________________________________*/
/* 第四部分:底部选项 */
.options {
  font-size: 11.8px;
  display: flex;
  /* 使得子元素在父容器中左右对齐 */
  justify-content: space-between;
  padding: 10px 0;
  width: 100%;
  align-items: center;
  /* 需要一个宽度值，.options是一个绝对定位元素 */
  position: absolute;
  top: 429px;
}

/* 左侧复选框 */
.checkbox {
  color: rgb(171, 171, 171);
  display: flex;
  /* 这使内容在垂直方向上排列 */
  flex-direction: column;
  margin-left: 28px;
}

.checkbox1,
.checkbox2 {
  /* 取消默认样式 */
  -moz-appearance: none;
  appearance: none;
  /* 大小 */
  width: 14px;
  height: 14px;
  display: inline-block;
  /* 边框样式 */
  border: 1px solid #d3d3d3;
  border-radius: 2.5px;
  /* 白色背景 */
  background-color: #fff;
  /* 绝对定位 */
  position: absolute;
  top: 10px;
  left: 25px;
  /* 元素的中点与行高的中点对齐 */
  vertical-align: middle;
}

/* 触碰时的样式 */
.checkbox1:hover,
.checkbox2:hover {
  /* 防止覆盖 */
  z-index: 1;
  /* 浅灰色色背景蓝色边框 */
  background-color: #edecec;
  border: 1px solid #066aed;
}

/* 选中时再触碰的样式 */
.checkbox1:checked:hover,
.checkbox2:checked:hover {
  /* 浅蓝色背景边框 */
  background-color: #649bfb;
  border: 1px solid #649bfb;
}

/* 选中时样式 */
.checkbox1:checked,
.checkbox2:checked {
  /* 蓝色背景边框 */
  background-color: #1e6fff;
  border: 1px solid #1e6fff;
}

/* 选中时里面增加对勾 */
.checkbox1:checked::after,
.checkbox2:checked::after {
  font-size: 9px;
  content: '\2714';
  color: rgb(214, 214, 214);
  /* 调节位置,使其大概居中 */
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkbox2 {
  /* 使其和上面的复选框拉开距离 */
  position: absolute;
  top: 44px;
}

/* 复选框旁边文字 */
.checkbox1-text {
  position: absolute;
  top: 11px;
  left: 47px;
}

.checkbox2-text {
  position: absolute;
  top: 46.5px;
  left: 47px;
}

/* 右侧连接 */
.link {
  width: 68px;
  height: 55px;
  display: flex;
  /* 这使内容在垂直方向上排列 */
  flex-direction: column;
  /* 距页面右侧距离 */
  margin-right: 10px;
}

.link1 {
  color: rgb(171, 171, 171);
  /* 无下划线 */
  text-decoration: none;
  display: flex;
  margin-top: 1.5px;
}

.link2 {
  color: rgb(171, 171, 171);
  /* 无下划线 */
  text-decoration: none;
  position: absolute;
  display: flex;
  margin-top: 37px;
}


/* _______________________________________________________________*/
/* 第五部分:登陆成功提示框样式*/
#toast {
  display: none;
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  /* 覆盖所以 */
  z-index: 100;
}

/* _______________________________________________________________*/
/* 隐藏元素 */
.hidden {
  /* 使用 !important 确保这个规则有最高优先级 */
  display: none !important;
}